<!--
  Generated template for the ProjectCreatePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar>
        <ion-title>{{viewTitle}}</ion-title>
        <ion-buttons end>
            <button ion-button (click)="onPublish()" color="danger">
                {{this.project.itemName.length>0?"完成":"发布"}}
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>


<ion-content fullscreen>
    <ion-list no-margin no-lines no-padding style="border-top: solid 10px #f5f6f7; border-bottom: solid 10px #f5f6f7;">
        <ion-item style="height: 50px">
            <ion-icon item-start name="appname-pname"></ion-icon>
            <ion-label style="color: #868686">项目名称</ion-label>
            <ion-input item-end text-right placeholder="请输入项目名称" [(ngModel)]="project.itemName"></ion-input>
        </ion-item>
    </ion-list>

    <div style="height: 30px; border-bottom: solid 1px #ececec">
        <div style="width: 5px; height: 30px; background-color: orange; float: left;"></div>
        <ion-label no-margin no-padding style="line-height: 30px; margin-left: 10px; float: left;">项目启动</ion-label>
    </div>
    <ion-list no-lines no-padding no-margin style="border-bottom: solid 10px #f5f6f7;">
        <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
            <ion-icon item-start name="appname-time"></ion-icon>
            <ion-label style="color: #868686">交付时间</ion-label>
            <ion-datetime item-end displayFormat="YYYY年MM月DD日" max="2030" min={{minTime}}
                          ngModel="{{project.itemStartTime | stampToDate}}"
                          (ngModelChange)="project.itemStartTime = $event"
                          cancelText="取消" doneText="确认"></ion-datetime>
        </ion-item>
        <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
            <ion-icon item-start name="appname-result"></ion-icon>
            <ion-label style="color: #868686">交付成果</ion-label>
            <ion-input item-end text-right placeholder="请输入交付成果" [(ngModel)]="project.itemStartResult"
                       required></ion-input>
        </ion-item>
        <ion-item style="height: 50px">
            <ion-icon item-start name="appname-plan"></ion-icon>
            <ion-label style="color: #868686">项目级别</ion-label>
            <ion-select interface="action-sheet" [(ngModel)]="project.itemLevel" cancelText="取消" doneText="确认">
                <ion-option value="1">一级</ion-option>
                <ion-option value="2">二级</ion-option>
                <ion-option value="3">三级</ion-option>
                <ion-option value="4">四级</ion-option>
            </ion-select>
        </ion-item>
    </ion-list>

    <div style="border-bottom: solid 10px #f5f6f7;" *ngFor="let mile of project.milestoneVo1; let i = index">
        <div style="height: 30px; border-bottom: solid 1px #ececec; ">
            <div style="width: 5px; height: 30px; background-color: orange; float: left;"></div>
            <ion-label no-margin no-padding style="line-height: 30px; margin-left: 10px; float: left;">
                {{mile.milestoneName}}
            </ion-label>
            <div style="float: right; width: 30px; height: 30px;position: relative">
                <ion-icon name="close"
                          style="position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-right: 10px; "
                          (click)="onClickRemoveMilestone($event, mile)"></ion-icon>
            </div>
        </div>
        <ion-list no-lines no-margin no-padding (click)="onClickMilestone($event, mile, i)">
            <!--<ion-item style="border-bottom: solid 1px #ececec">-->
            <!--<ion-icon item-start name="appname-admin"></ion-icon>-->
            <!--<ion-label>负责人</ion-label>-->
            <!--&lt;!&ndash;<ion-label no-margin no-padding float-end text-right [hidden]="type==1">{{mile.itemEndLeader}}</ion-label>&ndash;&gt;-->
            <!--<ion-input item-end text-right [readonly]="type==2" unselectable="on" (ionFocus)="onFocusInput($event)" [(ngModel)]="mile.itemEndLeader"></ion-input>-->
            <!--</ion-item>-->
            <button ion-item style="border-bottom: solid 1px #ececec; height: 50px" disabled>
                <ion-icon item-start name="appname-admin"></ion-icon>
                <ion-label item-start [ngStyle]="{'margin-left':this.platform.is('ios')?'0px':'20px'}"
                           style="color: #868686">负责人:
                </ion-label>
                <ion-label item-end text-right>{{mile.itemEndLeader}}</ion-label>
            </button>
            <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
                <ion-icon item-start name="appname-time"></ion-icon>
                <ion-label style="color: #868686">交付时间</ion-label>
                <ion-datetime item-end displayFormat="YYYY年MM月DD日" max="2030" min={{minTime}} cancelText="取消"
                              doneText="确认"
                              ngModel="{{mile.deliveryTime | stampToDate}}"
                              (ngModelChange)="mile.deliveryTime = $event"
                              disabled></ion-datetime>
            </ion-item>
            <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
                <ion-icon item-start name="appname-plan"></ion-icon>
                <ion-label style="color: #868686">项目进度</ion-label>
                <ion-select interface="action-sheet" [(ngModel)]="mile.itemProgress" cancelText="取消" doneText="确认"
                            disabled>
                    <ion-option value="10%">10%</ion-option>
                    <ion-option value="20%">20%</ion-option>
                    <ion-option value="30%">30%</ion-option>
                    <ion-option value="40%">40%</ion-option>
                    <ion-option value="50%">50%</ion-option>
                    <ion-option value="60%">60%</ion-option>
                    <ion-option value="70%">70%</ion-option>
                    <ion-option value="80%">80%</ion-option>
                    <ion-option value="90%">90%</ion-option>
                    <ion-option value="100%">100%</ion-option>
                </ion-select>
            </ion-item>
            <ion-item style="height: 50px">
                <ion-icon item-start name="appname-result"></ion-icon>
                <ion-label style="color: #868686">交付成果</ion-label>
                <ion-input item-end text-right id="miletext" [(ngModel)]="mile.deliveryResult" readonly
                           (ionFocus)="onFocusInput($event, mile, i)"></ion-input>
            </ion-item>
        </ion-list>
    </div>


    <div style="padding: 10px; border-bottom: solid 10px #f5f6f7">
        <button ion-button (click)="onAddMilestone()" style="background-color: #fc5c53" block>+ 添加里程碑</button>
    </div>

    <div style="height: 30px; border-bottom: solid 1px #ececec">
        <div style="width: 5px; height: 30px; background-color: #a8bdff; float: left;"></div>
        <ion-label no-margin no-padding style="line-height: 30px; margin-left: 10px; float: left;">项目结束</ion-label>
    </div>
    <ion-list no-lines no-margin no-padding>
        <button ion-item style="border-bottom: solid 1px #ececec; height: 50px" (click)="onEndDirector($event)">
            <ion-icon item-start name="appname-admin"></ion-icon>
            <ion-label item-start [ngStyle]="{'margin-left':this.platform.is('ios')?'0px':'20px'}"
                       style="color: #868686">负责人
            </ion-label>
            <!--<ion-input item-end text-right placeholder="请输入负责人" [(ngModel)]="project.itemLeader"></ion-input>-->
            <ion-label item-end text-right>{{project.itemEndLeader}}</ion-label>
        </button>
        <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
            <ion-icon item-start name="appname-time"></ion-icon>
            <ion-label style="color: #868686">交付时间</ion-label>
            <ion-datetime item-end displayFormat="YYYY年MM月DD日" max="2030" min={{minTime}}
                          cancelText="取消" doneText="确认"
                          ngModel="{{project.endTime | stampToDate}}"
                          (ngModelChange)="project.endTime = $event"></ion-datetime>
        </ion-item>
        <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
            <ion-icon item-start name="appname-result"></ion-icon>
            <ion-label style="color: #868686">交付成果</ion-label>
            <ion-input item-end text-right placeholder="请输入交付成果" [(ngModel)]="project.itemEndResult"></ion-input>
        </ion-item>
    </ion-list>

    <div style="border-bottom: solid 10px #f5f6f7;" *ngFor="let delayMile of project.milestoneVo2; let i = index" >
        <div style="height: 30px; border-bottom: solid 1px #ececec; ">
            <div style="width: 5px; height: 30px; background-color: orange; float: left;"></div>
            <ion-label no-margin no-padding style="line-height: 30px; margin-left: 10px; float: left;">{{delayMile.milestoneName}}</ion-label>
            <div style="float: right; width: 30px; height: 30px;position: relative">
                <ion-icon name="close" style="position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-right: 10px; " (click)="onClickRemoveMilestone($event, mile)"></ion-icon>
            </div>
        </div>
        <ion-list no-lines no-margin no-padding (click)="onClickMilestone($event, delayMile, i)">
            <!--<ion-item style="border-bottom: solid 1px #ececec">-->
            <!--<ion-icon item-start name="appname-admin"></ion-icon>-->
            <!--<ion-label>负责人</ion-label>-->
            <!--&lt;!&ndash;<ion-label no-margin no-padding float-end text-right [hidden]="type==1">{{mile.itemEndLeader}}</ion-label>&ndash;&gt;-->
            <!--<ion-input item-end text-right [readonly]="type==2" unselectable="on" (ionFocus)="onFocusInput($event)" [(ngModel)]="mile.itemEndLeader"></ion-input>-->
            <!--</ion-item>-->
            <button ion-item style="border-bottom: solid 1px #ececec; height: 50px" disabled>
                <ion-icon item-start name="appname-admin"></ion-icon>
                <ion-label item-start [ngStyle]="{'margin-left':this.platform.is('ios')?'0px':'20px'}" style="color: #868686">负责人:</ion-label>
                <ion-label item-end text-right>{{delayMile.itemEndLeader}}</ion-label>
            </button>
            <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
                <ion-icon item-start name="appname-time"></ion-icon>
                <ion-label style="color: #868686">交付时间</ion-label>
                <ion-datetime item-end displayFormat="YYYY年MM月DD日" max="2030" min={{minTime}} cancelText="取消" doneText="确认"
                              ngModel="{{delayMile.deliveryTime | stampToDate}}"
                              (ngModelChange)="delayMile.deliveryTime = $event"
                              disabled></ion-datetime>
            </ion-item>
            <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
                <ion-icon item-start name="appname-plan"></ion-icon>
                <ion-label style="color: #868686">项目进度</ion-label>
                <ion-select interface="action-sheet" [(ngModel)]="delayMile.itemProgress" cancelText="取消" doneText="确认" disabled>
                    <ion-option value="10%">10%</ion-option>
                    <ion-option value="20%">20%</ion-option>
                    <ion-option value="30%">30%</ion-option>
                    <ion-option value="40%">40%</ion-option>
                    <ion-option value="50%">50%</ion-option>
                    <ion-option value="60%">60%</ion-option>
                    <ion-option value="70%">70%</ion-option>
                    <ion-option value="80%">80%</ion-option>
                    <ion-option value="90%">90%</ion-option>
                    <ion-option value="100%">100%</ion-option>
                </ion-select>
            </ion-item>
            <ion-item style="height: 50px">
                <ion-icon item-start name="appname-result"></ion-icon>
                <ion-label style="color: #868686">交付成果</ion-label>
                <ion-input item-end text-right id="miletext2" [(ngModel)]="delayMile.deliveryResult" readonly  (ionFocus)="onFocusInput2($event, mile, i)"></ion-input>
            </ion-item>
        </ion-list>
    </div>
</ion-content>


